import { Navigate, createHashRouter } from "react-router-dom";
import Layouts from "../layouts";

import APPSafePoint from "../views/APPSafePoint";
import CSSPoint from "../views/CSSPoint";
import CSSTPoint from "../views/CSSTPoint";
import HtmlPoint from "../views/HtmlPoint";
import HttpPoint from "../views/HttpPoint";

import ECMA6 from "../views/JSPoint/ECMA6";
import JSPoint from "../views/JSPoint";
import OptimizationPoint from "../views/OptimizationPoint";

import Cart from '../views/ReactPoint/ReduxUse/Components/cart'
import Home from '../views/ReactPoint/ReduxUse/Components/home'
import ReduxUse from '../views/ReactPoint/ReduxUse'
import BasicUse from "../views/ReactPoint/BasicUse";
import ReactPoint from "../views/ReactPoint";

import WebPackPoint from "../views/WebPackPoint";

const AuthComponent = (node) => {
  const isAuth = false
  if (isAuth) {
    return <>{node}</>
  }else {
    return <Navigate to="/login"></Navigate>
  }
}

const constRoutes = [
  {
    path:'/layout',
    Component(){
      return <Layouts></Layouts>
    },
    children: [
      {
        path:'appsafe',
        Component(){
          return <APPSafePoint />
        },
        meta:{title:'appsafe',icon:'chart'},
      },

      {
        path:'css',
        Component(){
          return <CSSPoint />
        },
        meta:{title:'css',icon:'clipboard'},
      },
      {
        path:'css3',
        Component(){
          return <CSSTPoint />
        },
        meta:{title:'css3',icon:'clipboard'},
      },

      {
        path:'html',
        Component(){
          return <HtmlPoint />
        },
        meta:{title:'html',icon:'component'},
      },

      {
        path:'http',
        Component(){
          return <HttpPoint></HttpPoint>
        },
        meta:{title:'http',icon:'dashboard'},
      },
      {
        path:'js',
        Component(){
          return <JSPoint></JSPoint>
        },
        meta:{title:'js',icon:'documentation'},
        children: [
          {
            path:'ecma6',
            Component(){
              return <ECMA6></ECMA6>
            },
            meta:{title:'ecma6',icon:'documentation'},
          }
        ]
      },
      {
        path:'optimiza',
        Component(){
          return <OptimizationPoint></OptimizationPoint>
        },
        meta:{title:'optimiza',icon:'drag'},
      },
      {
        path:'react',
        Component(){
          return <ReactPoint></ReactPoint>
        },
        meta:{title:'react',icon:'edit'},
        children: [
          {
            path: 'reduxuse',
            element:<ReduxUse></ReduxUse>,
            meta:{title:'reduxuse',icon:'education'},
            children: [
              {
                path: 'cart',
                element:<Cart></Cart>,
                meta:{title:'cart',icon:'email'},
              },
              {
                path: 'home',
                element:<Home></Home>,
                meta:{title:'home',icon:'example'},
              }
            ]
          },
          {
            path: 'baseicuse',
            Component() {
              console.log('use')
              return AuthComponent(<BasicUse></BasicUse>)
            },
            meta:{title:'basicuse',icon:'education'},
          }
        ]
      },
      {
        path:'webpack',
        Component(){
          return <WebPackPoint></WebPackPoint>
        },
        meta:{title:'webpack',icon:'excell'},
      },
      
    ]
  },
  
  {
    path: "/",
    Component() {
      return <Navigate to="/layout/react"></Navigate>
    },
    children: [
      
      
      // {
      //   path: "dashboard",
      //   async lazy() {
      //     // Multiple routes in lazy file
      //     let { DashboardLayout } = await import("./pages/Dashboard");
      //     return { Component: DashboardLayout };
      //   },
      //   children: [
      //     {
      //       index: true,
      //       async lazy() {
      //         let { DashboardIndex } = await import("./pages/Dashboard");
      //         return { Component: DashboardIndex };
      //       },
      //     },
      //     {
      //       path: "messages",
      //       async lazy() {
      //         let { dashboardMessagesLoader, DashboardMessages } = await import(
      //           "./pages/Dashboard"
      //         );
      //         return {
      //           loader: dashboardMessagesLoader,
      //           Component: DashboardMessages,
      //         };
      //       },
      //     },
      //   ],
      // },
      // {
      //   path: "*",
      //   element: <NoMatch />,
      // },
    ],
  },
]
const fRoutes = [
  {
    path: "/404",
    Component() {
      return <div>404</div>
    },
    meta: {title:'hello'},
    children: []
  },
  // {
  //   path: "*",
  //   Component() {
  //     return <div>404</div>
  //   },
  //   meta: {title:'hello'},
  //   errorElement:<div>404</div>
  // },
  {
    path: "/login",
    Component() {
      return <div>login</div>
    },
    meta: {title:'login'},
  }
]

export {
  constRoutes,
  fRoutes
}
const router = createHashRouter([...constRoutes,...fRoutes]);
export default router